<template>
  <div>
    <div class="c-ph32 c-pt24 c-flex-row c-aligni-center">
      <span class="c-fs28 c-fc-xblack c-fw600">答题卡</span>
      <span class="c-fs24 c-pl28 c-fc-gray c-flex-grow1 c-w0">(共{{answerCardList.length}}题)</span>
      <div class="c-fs20 c-fc-gray c-flex-row c-mr50 c-aligni-center">
        <span class="c-block c-ww16 c-hh16 c-brp50 c-bg71db77 c-mr12"></span>
        <span>答对</span>
      </div>
      <div class="c-fs20 c-fc-gray c-flex-row c-aligni-center">
        <span class="c-block c-ww16 c-hh16 c-brp50 c-bg-lred c-mr12">
        </span><span>答错</span>
      </div>
    </div>
    <div class="c-pv20 c-flex-row c-flexw-wrap">
      <div class="c-w20 c-pv20" v-for="(item,index) in answerCardList" :key="index">
        <span class="c-center c-textAlign-c c-ww60 c-hh60 c-fs26 c-fc-white c-p">
          <div class="c-lh60 c-ww60 c-hh60 c-brp50 c-fw600" :class="item.isRight==1?'c-05bg71 c-bd71db77 c-fs71db77':'c-05bglred c-lred77 c-fc-lred'">{{index+1}}</div>
          <div class="iconfont c-fs26 c-pa c-p-b0 c-brp50 c-p-r-02 c-fs71db77 c-bg-white" v-if="item.isRight==1">&#xe774;</div>
          <div class="iconfont c-fs26 c-pa c-p-b0 c-brp50 c-p-r-02 c-fc-lred c-bg-white" v-else>&#xe773;</div>
        </span>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  name: "clockAswerResultCom",
  components: {},
  //props: ["item"],
  props: {

    answerCardList: {
      type: Array,
      default: () => []
    },

  },
  computed: {
    // 计算属性的 getter
    rightLength: function () {
      // `this` 指向 vm 实例
      return this.answerCardList.filter(item => {
        return item.isRight == 1;
      }).length;
    }
  },
  data() {
    return {

    };
  },

  methods: {

  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.c-fs71db77{
  color: #71DB77;
}
.c-fc-lred{
  color: #FB816D;
}
.c-bg71db77{
  background: #71DB77;
}
.c-05bg71{
  background: rgba(113,219,119, 0.05);
}
.c-05bglred{
  background: rgba(251,129,109, 0.05);
}
.c-bd71db77{
  border:1px solid #71DB77;
}
.c-lred77{
  border:1px solid  #FB816D;
}
.c-p-r-02{
  right: -0.2rem;
}
</style>
